import React, { useState, useEffect } from 'react';
import ReactECharts from 'echarts-for-react';

const Page= () => {
    const option = {
        title: {
            text: '功能流量图'
        },
        tooltip: {},
        legend: {
            data: ['本月访问量', '上月访问量']
        },
        radar: {
            indicator: [
                { name: '信息更改（sales）', max: 6500},
                { name: '管理（Administration）', max: 16000},
                { name: '请假（Information Techology）', max: 30000},
                { name: '换寝（Customer Support）', max: 38000},
                { name: '报修（Development）', max: 52000},
                { name: '打卡（Marketing）', max: 25000}
            ]
        },
        series: [{
            name: '预算 vs 开销（Budget vs spending）',
            type: 'radar',
            // areaStyle: {normal: {}},
            data : [
                {
                    value : [4300, 10000, 28000, 35000, 50000, 19000],
                    name : '本月访问量'
                },
                {
                    value : [5000, 14000, 28000, 31000, 42000, 21000],
                    name : '上月访问量'
                }
            ]
        }]
    };

    let timer;

    useEffect(() => {

    });

    const loadingOption = {
        text: '加载中...',
        color: '#4413c2',
        textColor: '#270240',
        maskColor: 'rgba(194, 88, 86, 0.3)',
        zlevel: 0
    };

    function onChartReady(echarts) {
        timer = setTimeout(function() {
            echarts.hideLoading();
        }, 3000);
    }

    return <ReactECharts
        option={option}
        style={{ height: 400,width:800 }}
        onChartReady={onChartReady}
        loadingOption={loadingOption}
        showLoading={false}
    />;
};

export default Page;